<template>
  <div class="bad-habits-container">
    <!-- 每日任务座右铭白板 -->
    <div class="motto-board" style="margin-bottom: 24px">
      <el-card class="motto-card" shadow="hover">
        <template #header>
          <div class="motto-header">
            <el-icon><Document /></el-icon>
            <span>今日座右铭 & 重要提醒</span>
          </div>
          <div class="title-section">
            <h2 class="title-text">{{ title || "未命名卡片" }}</h2>
          </div>
          <div class="action-buttons">
            <el-button
              type="success"
              @click="handleJiwei"
              class="action-button jiwei-button"
            >
              <el-icon class="el-icon">
                <Medal />
              </el-icon>
              积微
              <span class="jiwei-count" v-if="jiweiCount > 0 && !isMobile"
                >({{ jiweiCount }})</span
              >
            </el-button>
          </div>
        </template>
        <div class="motto-content">
          <md-preview :modelValue="dailyMotto" class="markdown-preview" />
        </div>
      </el-card>
    </div>
    <!-- 统计概览 -->
    <div class="statistics-overview">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stat-card primary-card">
            <template #header>
              <div class="stat-header">
                <el-icon><Timer /></el-icon>
                <span>今日剩余自由时间</span>
              </div>
            </template>
            <div class="stat-content">
              <span class="stat-value">{{ remainingFreeTime }}</span>
              <span class="stat-unit">分钟</span>
              <div class="button-group">
                <el-button
                  type="primary"
                  @click="showConsumeDialog"
                  class="consume-btn"
                >
                  时间报销
                </el-button>
                <el-button
                  type="primary"
                  @click="showInstallmentDialog"
                  class="consume-btn"
                >
                  时间分期
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stat-card warning-card">
            <template #header>
              <div class="stat-header">
                <el-icon><Warning /></el-icon>
                <span>新卡片数量</span>
              </div>
            </template>
            <div class="stat-content">
              <span class="stat-value">{{ totalBadHabits }}</span>
              <span class="stat-unit">张</span>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stat-card info-card">
            <template #header>
              <div class="stat-header">
                <el-icon><TrendCharts /></el-icon>
                <span>习惯等级统计</span>
              </div>
            </template>
            <div class="stat-content">
              <div class="level-list">
                <div
                  class="level-item"
                  v-for="item in habitLevelStatsSorted"
                  :key="item.habitName"
                >
                  <span class="level-name">{{ item.habitName }}</span>
                  <span
                    class="level-count"
                    :class="{
                      'level-count--achieved': item.completedCount > 5,
                    }"
                  >
                    <span
                      v-if="item.completedCount > 5"
                      class="level-dot"
                    ></span
                    >{{ item.completedCount }} 次
                  </span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stat-card success-card">
            <template #header>
              <div class="stat-header">
                <el-icon><Calendar /></el-icon>
                <span>今日工作时长</span>
              </div>
            </template>
            <div class="stat-content">
              <span class="stat-value">{{ mostFrequentTime }}</span>
              <span class="stat-unit">分钟</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 三个并列的列表区域 -->
    <div class="lists-container">
      <el-row :gutter="20">
        <!-- 工作学习明细 -->
        <el-col :xs="24" :sm="24" :md="8">
          <el-card class="list-card">
            <template #header>
              <div class="list-header">
                <el-icon><Document /></el-icon>
                <span>工作学习明细</span>
              </div>
            </template>
            <div class="list-content">
              <el-tree
                :data="workStudyList"
                node-key="path"
                :props="defaultProps"
                default-expand-all
                class="custom-tree"
              >
                <template #default="{ data }">
                  <div class="custom-tree-node">
                    <span>{{ data.name }}</span>
                    <span v-if="data.count" class="node-count"
                      >{{ data.count }}次</span
                    >
                  </div>
                </template>
              </el-tree>
            </div>
          </el-card>
        </el-col>

        <!-- 浪费时间明细 -->
        <el-col :xs="24" :sm="24" :md="8">
          <el-card class="list-card">
            <template #header>
              <div class="list-header">
                <el-icon><Timer /></el-icon>
                <span>浪费时间明细</span>
              </div>
            </template>
            <div class="list-content">
              <el-tree
                :data="wastedTimeList"
                node-key="path"
                :props="defaultProps"
                default-expand-all
                class="custom-tree"
              >
                <template #default="{ data }">
                  <div class="custom-tree-node">
                    <span>{{ data.name }}</span>
                    <span v-if="data.count" class="node-count"
                      >{{ data.count }}次</span
                    >
                  </div>
                </template>
              </el-tree>
            </div>
          </el-card>
        </el-col>

        <!-- 待办任务明细 -->
        <el-col :xs="24" :sm="24" :md="8">
          <el-card class="list-card">
            <template #header>
              <div class="list-header">
                <el-icon><List /></el-icon>
                <span>待办任务明细</span>
              </div>
            </template>
            <div class="list-content">
              <el-table
                :data="todoList"
                style="width: 100%"
                v-loading="todoLoading"
                height="400"
              >
                <el-table-column
                  prop="skillName"
                  label="名称"
                  min-width="120"
                />
                <el-table-column label="进度" width="120">
                  <template #default="{ row }">
                    <div class="progress-cell">
                      <span
                        class="progress-dot"
                        :class="{
                          'is-completed': row.isCompleted === 1,
                          'is-in-progress': row.isCompleted === 0,
                        }"
                      ></span>
                      <span class="progress-text">
                        {{ calculateProgress(row) }}%
                      </span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="剩余节点"
                  min-width="120"
                  show-overflow-tooltip
                >
                  <template #default="{ row }">
                    <div class="description-cell">
                      <el-tooltip
                        v-if="getRemainingNodes(row).length > 0"
                        :content="getRemainingNodes(row).join('、')"
                        placement="top"
                      >
                        <el-tag
                          size="small"
                          type="warning"
                          class="remaining-tag"
                        >
                          {{ getRemainingNodes(row).length }}个待完成
                        </el-tag>
                      </el-tooltip>
                      <span v-else class="completed-text">全部完成</span>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 消费时间弹窗 
                  :min="1" 
              :max="Math.max(1, remainingFreeTime)"
 
    -->
    <el-dialog
      v-model="consumeDialogVisible"
      title="报销自由时间"
      width="360px"
      :close-on-click-modal="false"
      class="custom-dialog"
    >
      <div class="consume-form">
        <el-form :model="consumeForm" label-width="80px">
          <el-form-item label="报销时长">
            <el-input-number
              v-model="consumeForm.minutes"
              :step="5"
              placeholder="请输入消费分钟数"
              style="width: 180px"
            />
            <span class="unit-label">分钟</span>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeConsumeDialog">取消</el-button>
          <el-button type="primary" @click="handleConsumeTime">
            确认报销
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 时间分期弹窗 -->
    <el-dialog
      v-model="installmentDialogVisible"
      title="选择分期天数"
      width="360px"
      :close-on-click-modal="false"
      class="custom-dialog"
    >
      <div class="installment-options">
        <el-radio-group v-model="selectedInstallment" class="installment-group">
          <el-radio :label="3" class="installment-option">
            <div class="option-content">
              <span class="days">3天</span>
              <span class="description"
                >每天{{ Math.ceil(remainingFreeTime / 3) }}分钟</span
              >
            </div>
          </el-radio>
          <el-radio :label="5" class="installment-option">
            <div class="option-content">
              <span class="days">5天</span>
              <span class="description"
                >每天{{ Math.ceil(remainingFreeTime / 5) }}分钟</span
              >
            </div>
          </el-radio>
          <el-radio :label="7" class="installment-option">
            <div class="option-content">
              <span class="days">7天</span>
              <span class="description"
                >每天{{ Math.ceil(remainingFreeTime / 7) }}分钟</span
              >
            </div>
          </el-radio>
        </el-radio-group>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeInstallmentDialog">取消</el-button>
          <el-button
            type="primary"
            @click="handleInstallmentSubmit"
            :disabled="!selectedInstallment"
          >
            确认分期
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import {
  Timer,
  Warning,
  TrendCharts,
  Calendar,
  Document,
  List,
} from "@element-plus/icons-vue";
import {
  saveArticle,
  clock,
  getCategoryList,
  getCategory,
} from "@/api/article";
import { MdEditor, MdPreview, config } from "md-editor-v3";
import MarkExtension from "markdown-it-mark";
import { ElMessage } from "element-plus";
import * as scheduleApi from "@/api/schedule";
import emitter from "@/utils/eventBus";

// 状态

const remainingFreeTime = ref(0); // 默认120分钟
const remainingFreeTimeId = ref(null); // 默认120分钟
const consumeDialogVisible = ref(false);
const installmentDialogVisible = ref(false);
const selectedInstallment = ref(null);
const consumeForm = ref({
  minutes: 5,
});

// 示例数据
const badHabitsRecords = ref([
  {
    id: 1,
    time: "2024-03-20 14:30:00",
    behavior: "刷短视频",
    duration: 45,
    motivation: "工作压力大，需要放松",
    frequency: "high",
    description: "在午休时间刷短视频，原本计划休息20分钟，结果刷了45分钟。",
    impact: "导致下午工作状态不佳，注意力不集中，工作效率降低。",
    suggestion: "建议设置手机使用时间限制，午休时间控制在30分钟内。",
  },
  {
    id: 2,
    time: "2024-03-20 20:00:00",
    behavior: "玩游戏",
    duration: 120,
    motivation: "下班后想放松",
    frequency: "medium",
    description: "下班后玩游戏，原本计划玩1小时，结果玩了2小时。",
    impact: "影响晚上休息时间，导致第二天精神不佳。",
    suggestion: "建议设置游戏时间提醒，或者用其他方式放松，如运动、阅读等。",
  },
]);

const totalBadHabits = ref(0);

const habitLevelStats = ref([]);

const mostFrequentTime = ref(0);

// 新增：排序后的 habitLevelStats
const habitLevelStatsSorted = computed(() => {
  return [...habitLevelStats.value].sort(
    (a, b) => b.completedCount - a.completedCount
  );
});

// 显示消费弹窗
const showConsumeDialog = () => {
  // if (remainingFreeTime.value <= 0) {
  //   ElMessage.warning('今日自由时间已用完')
  //   return
  // }
  // 重置表单
  consumeForm.value = {
    minutes: 5,
  };
  consumeDialogVisible.value = true;
};

// 关闭消费弹窗
const closeConsumeDialog = () => {
  consumeDialogVisible.value = false;
  // 重置表单
  consumeForm.value = {
    minutes: 5,
  };
};

// 显示分期弹窗
const showInstallmentDialog = () => {
  if (remainingFreeTime.value >= 0) {
    ElMessage.warning("余额不为负，无需分期");
    return;
  }
  selectedInstallment.value = null;
  installmentDialogVisible.value = true;
};

// 关闭分期弹窗
const closeInstallmentDialog = () => {
  installmentDialogVisible.value = false;
  selectedInstallment.value = null;
};

// 获取详情数据
const fetchDetail = async () => {
  try {
    const res = await scheduleApi.getDetail();
    if (res.data.success) {
      const data = res.data.data;
      remainingFreeTime.value = data.totalReward || 0;
      remainingFreeTimeId.value = data.id;
      // 更新其他统计数据
      if (data.records) {
        badHabitsRecords.value = data.records.map((record) => ({
          id: record.id,
          time: record.createTime,
          behavior: record.scheduleName,
          duration: record.duration,
          motivation: record.motivation || "无",
          frequency: record.frequency || "medium",
          description: record.scheduleDes || "",
          impact: record.impact || "",
          suggestion: record.suggestion || "",
        }));
      }
    } else {
      ElMessage.warning(res.data.message || "获取数据失败");
    }
  } catch (error) {
    console.error("Fetch Detail Error:", error);
    ElMessage.error("获取数据失败");
  }
};

// 获取详情数据
const homeDetails = async () => {
  try {
    const queryParams = {
      dayTime: "",
      page: 0,
    };
    const res = await scheduleApi.homeDetails(queryParams);
    if (res.data.success) {
      const data = res.data.data;
      // 更新其他统计数据
      if (data.studiesNodes) {
        workStudyList.value = data.studiesNodes;
      }
      if (data.wastesNodes) {
        wastedTimeList.value = data.wastesNodes;
      }
      if (data.skillVos) {
        todoList.value = data.skillVos;
      }
    } else {
      ElMessage.warning(res.data.message || "获取数据失败");
    }
  } catch (error) {
    console.error("Fetch Detail Error:", error);
    ElMessage.error("获取数据失败");
  }
};

// 获取详情数据
const homeHeader = async () => {
  try {
    const queryParams = {
      dayTime: "",
      page: 0,
    };
    const res = await scheduleApi.homeHeader(queryParams);
    if (res.data.success) {
      const data = res.data.data;
      // 更新其他统计数据
      if (data.cardNum) {
        totalBadHabits.value = data.cardNum;
      }
      if (data.minutes) {
        mostFrequentTime.value = data.minutes;
      }
      if (data.habits) {
        habitLevelStats.value = data.habits;
      }
    } else {
      ElMessage.warning(res.data.message || "获取数据失败");
    }
  } catch (error) {
    console.error("Fetch Detail Error:", error);
    ElMessage.error("获取数据失败");
  }
};

// 工作学习列表
const workStudyList = ref([]);

// 浪费时间列表
const wastedTimeList = ref([]);

const todoList = ref([]);

// 加载状态
const todoLoading = ref(false);

// 在组件挂载时获取数据
onMounted(() => {
  fetchDetail();
  homeDetails();
  homeHeader();
  // 暂时注释掉API调用
  getReCategory();
  // fetchWastedTimeList()
  // fetchTodoList()
});

// 处理消费时间
const handleConsumeTime = async () => {
  // if (consumeForm.value.minutes > remainingFreeTime.value) {
  //   ElMessage.warning('消费时间不能超过剩余时间')
  //   return
  // }

  try {
    const res = await scheduleApi.consume({
      minutes: consumeForm.value.minutes,
      id: remainingFreeTimeId.value,
    });

    if (res.data.success) {
      // 更新剩余时间
      remainingFreeTime.value = Math.max(
        0,
        remainingFreeTime.value + consumeForm.value.minutes
      );
      // 显示成功消息
      ElMessage({
        message: `成功报销${consumeForm.value.minutes}分钟`,
        type: "success",
        duration: 800, // 2秒后消失
      });
      // 在数据更新后触发刷新header事件
      emitter.emit("refreshHeader");

      // 关闭弹窗并重置表单
      closeConsumeDialog();
      // 重新获取详情数据
      fetchDetail();
    } else {
      ElMessage.warning(res.data.message || "消费失败");
    }
  } catch (error) {
    console.error("Consume Time Error:", error);
    ElMessage.error("消费失败");
  }
};

// 处理分期提交
const handleInstallmentSubmit = async () => {
  if (!selectedInstallment.value) {
    ElMessage.warning("请选择分期天数");
    return;
  }

  try {
    const res = await scheduleApi.savePayment({
      count: selectedInstallment.value,
      id: remainingFreeTimeId.value,
    });

    if (res.data.success) {
      ElMessage({
        message: `成功设置${selectedInstallment.value}天分期`,
        type: "success",
        duration: 2000,
      });
      // 在数据更新后触发刷新header事件
      emitter.emit("refreshHeader");
      // 关闭弹窗
      closeInstallmentDialog();
      // 重新获取详情数据
      fetchDetail();
    } else {
      ElMessage.warning(res.data.message || "分期设置失败");
    }
  } catch (error) {
    console.error("Installment Error:", error);
    ElMessage.error("分期设置失败");
  }
};

// 计算完成进度
const calculateProgress = (row) => {
  if (!row.stageVos) return 0;
  let totalNodes = 0;
  let completedNodes = 0;

  row.stageVos.forEach((stage) => {
    stage.nodes.forEach((node) => {
      totalNodes++;
      if (node.completed) {
        completedNodes++;
      }
    });
  });

  return totalNodes === 0 ? 0 : Math.round((completedNodes / totalNodes) * 100);
};

// 获取剩余未完成的节点
const getRemainingNodes = (row) => {
  if (!row.stageVos) return [];
  const remainingNodes = [];

  row.stageVos.forEach((stage) => {
    stage.nodes.forEach((node) => {
      if (!node.completed) {
        remainingNodes.push(node.name);
      }
    });
  });

  return remainingNodes;
};

const handleJiwei = async () => {
  try {
    const response = await clock(cardId.value);
    if (response.data.success) {
      const readNumVo = response.data.data;
      if (readNumVo.reward === "很遗憾没有获得积分") {
        ElMessage.warning(readNumVo.reward);
      } else {
        ElMessage({
          type: "success",
          message: readNumVo.reward,
          duration: 1500,
        });
      }
      getReCategory();
      // 在数据更新后触发刷新header事件
      emitter.emit("refreshHeader");
    } else {
      ElMessage.error(response.data.message || "积微失败");
    }
  } catch (error) {
    console.error("积微失败:", error);
    ElMessage.error("积微失败，请稍后重试");
  }
};

// 获取卡片库列表
const getReCategory = async () => {
  try {
    const response = await getCategory();
    if (response.data.success) {
      const data = response.data.data;
      dailyMotto.value = data.content;
      cardId.value = data.id;
      title.value = data.title;
      console.log("获取卡片库列表成功:", data);
      console.log("获取卡片库列表成功:", dailyMotto.value);
    }
  } catch (error) {
    console.error("获取卡片库列表失败:", error);
    throw error; // 向上传递错误，让重试机制处理
  }
};

// 配置 markdown-it 插件
config({
  markdownItConfig(md) {
    md.use(MarkExtension);
  },
});

const dailyMotto = ref(
  "我一定会保持，愉快的态度，去两个小时，两个小时的测试。升级我的系统\n\n我还没到30岁呢，在30岁之前，我不可能会没有自信\n但实际上，你只要还活着，就有机会做任何你想做的事情。\n\n虽然我现在烂到了极点。\n但是我花了这么多时间，升级了我的复利系统\n那就是值得的\n\n目前对舒服的评价：\n躺在床上，玩游戏、看视频、打飞机\n在桌子前面，玩主机游戏\n很明显玩3a更有意义\n在床上玩游戏，浪费时间\n你敢熬夜看球，第二天就报废\n\n我的童年，完完全全就是在恐惧中度过，这不是你的错，我可以保护我自己了宝贝\n\n异步时间，异步事件\n\n目标一定要完成\n\n我不能怎么样，紧接着我可以怎么样也许更好\n\n\n这个时间利用率怎么计算？\n产出和思考人生利用率计算"
); // 可自定义或从API获取
const title = ref("未命名"); // 可自定义或从API获取
const cardId = ref(0); // 可自定义或从API获取
</script>

<style scoped>
.bad-habits-container {
  padding: 24px;
  min-height: 400px;
  max-width: 1400px;
  margin: 0 auto;
  background-color: #f5f7fa;
}

.statistics-overview {
  margin-bottom: 32px;
}

.stat-card {
  height: 100%;
  transition: all 0.3s ease;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.primary-card {
  background: linear-gradient(135deg, #409eff 0%, #36d1dc 100%);
}

.warning-card {
  background: linear-gradient(135deg, #e6a23c 0%, #f5b041 100%);
}

.info-card {
  background: linear-gradient(135deg, #909399 0%, #a4a4a4 100%);
}

.success-card {
  background: linear-gradient(135deg, #67c23a 0%, #7dce82 100%);
}

.stat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
}

.stat-header .el-icon {
  font-size: 18px;
}

.stat-content {
  text-align: center;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.stat-value {
  font-size: 42px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-unit {
  margin-left: 4px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
}

.button-group {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.consume-btn {
  width: 120px;
  height: 40px;
  border-radius: 20px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  transition: all 0.3s ease;
}

.consume-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.consume-form {
  padding: 20px;
}

.unit-label {
  margin-left: 8px;
  color: #909399;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 20px;
}

.custom-dialog :deep(.el-dialog__header) {
  padding: 20px;
  margin: 0;
  border-bottom: 1px solid #ebeef5;
}

.custom-dialog :deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.custom-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

.installment-options {
  padding: 20px;
}

.installment-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.installment-option {
  width: 100%;
  height: 72px;
  border: 2px solid #e4e7ed;
  border-radius: 12px;
  padding: 0 20px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.installment-option:hover {
  border-color: #409eff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
}

.installment-option :deep(.el-radio__input) {
  display: none;
}

.installment-option :deep(.el-radio__label) {
  padding-left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.option-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.days {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.days::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #409eff;
  opacity: 0.5;
}

.description {
  font-size: 14px;
  color: #909399;
  line-height: 1;
}

.installment-option :deep(.el-radio.is-checked) {
  border-color: #409eff;
  background: linear-gradient(
    135deg,
    rgba(64, 158, 255, 0.08) 0%,
    rgba(64, 158, 255, 0.15) 100%
  );
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.15);
}

.installment-option :deep(.el-radio.is-checked)::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 40px 0;
  border-color: transparent #409eff transparent transparent;
  transition: all 0.3s ease;
}

.installment-option :deep(.el-radio.is-checked)::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2;
}

.installment-option :deep(.el-radio.is-checked .days) {
  color: #409eff;
  font-weight: 700;
}

.installment-option :deep(.el-radio.is-checked .days::before) {
  background-color: #409eff;
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.2);
}

.installment-option :deep(.el-radio.is-checked .description) {
  color: #409eff;
  font-weight: 500;
}

.lists-container {
  margin-top: 32px;
}

.list-card {
  height: 100%;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.list-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.list-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.list-header .el-icon {
  font-size: 18px;
  color: #409eff;
}

.list-content {
  padding: 0;
}

.list-content :deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

.list-content :deep(.el-table th) {
  background-color: #f5f7fa;
  font-weight: 600;
  color: #606266;
  padding: 12px 0;
}

.list-content :deep(.el-table td) {
  padding: 12px 0;
}

.list-content :deep(.el-tag) {
  border-radius: 4px;
  padding: 0 12px;
  height: 24px;
  line-height: 24px;
  font-size: 13px;
}

.progress-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #909399;
  transition: all 0.3s ease;
}

.progress-dot.is-completed {
  background-color: #67c23a;
  box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.2);
}

.progress-dot.is-in-progress {
  background-color: #e6a23c;
  box-shadow: 0 0 0 2px rgba(230, 162, 60, 0.2);
}

.progress-dot.is-not-started {
  background-color: #909399;
  box-shadow: 0 0 0 2px rgba(144, 147, 153, 0.2);
}

.progress-text {
  font-size: 14px;
  color: #606266;
}

.custom-tree {
  background: transparent;
}

.custom-tree :deep(.el-tree-node__content) {
  height: 40px;
}

.custom-tree :deep(.el-tree-node__content:hover) {
  background-color: #f5f7fa;
}

.custom-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 0;
}

.node-count {
  font-size: 12px;
  color: #909399;
  background-color: #f5f7fa;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 8px;
}

.date-label {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.name-label {
  font-size: 14px;
  color: #606266;
}

.duration-label {
  font-size: 13px;
  color: #909399;
}

.count-label {
  font-size: 13px;
  color: #909399;
  margin-left: 8px;
}

.description-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stage-tag {
  cursor: help;
}

.remaining-tag {
  cursor: help;
}

.completed-text {
  color: #67c23a;
  font-size: 14px;
}

.level-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 150px;
  overflow-y: auto;
  padding-right: 4px;
}

.level-list::-webkit-scrollbar {
  width: 4px;
}

.level-list::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.level-list::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.level-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
  min-height: 40px;
}

.level-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(4px);
}

.level-name {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

.level-count {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 8px;
  border-radius: 12px;
}

.level-count--achieved {
  color: #3180e8 !important;
  background: #e3f0fd;
  border-radius: 12px;
  padding: 2px 10px 2px 6px;
  font-weight: 500;
  border: 1px solid #b3d8fd;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.level-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3180e8;
  margin-right: 4px;
}

.motto-board {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto 24px auto;
}

.motto-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 0 0 0 0;
}

.motto-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #3180e8;
}

.motto-header .el-icon {
  font-size: 20px;
}

.motto-content {
  padding: 18px 0 18px 0;
  text-align: center;
}

.motto-text {
  font-size: 20px;
  color: #303133;
  font-weight: 500;
  letter-spacing: 1px;
}

.action-buttons {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.title-section {
  flex: 1;
  margin-right: 24px;
  position: relative;
}

.title-text {
  font-family: verdana, sans-serif;
  font-size: 16px;
}

.markdown-preview {
  font-size: 16px;
  line-height: 1.8;
  color: #2c3e50;
}

@media screen and (max-width: 768px) {
  .bad-habits-container {
    padding: 16px;
  }

  .statistics-overview {
    margin-bottom: 20px;
  }

  .stat-card {
    margin-bottom: 16px;
  }

  .stat-header {
    padding: 12px 0;
  }

  .stat-content {
    padding: 16px 0;
  }

  .stat-value {
    font-size: 32px;
  }

  .stat-unit {
    font-size: 14px;
  }

  .consume-btn {
    width: 120px;
    height: 36px;
    font-size: 14px;
  }

  .lists-container {
    margin-top: 20px;
  }

  .list-card {
    margin-bottom: 16px;
  }

  .list-header {
    font-size: 15px;
  }

  .list-content :deep(.el-table th),
  .list-content :deep(.el-table td) {
    padding: 8px 0;
  }
}
</style> 